import React from 'react';
import Mixins from '@/components/Common/mixin';
import TableTool from '@/components/CreateTable/TableTool';
import { Tabs } from 'antd';
import constant from '@/const';
import { getAccountInfo } from './applicantConfig';

import Applicant from './applicant';
import Agent from './agent';

const { TabPane } = Tabs;

class Details extends Mixins {
  public state = {
    active: '1',
  };

  /**
   * 渲染内容区
   */
  renderContent = () => {
    const { superiorInfo, currentRow } = this.props;
    const { active } = this.state;

    return (
      <Tabs defaultActiveKey={active}>
        <TabPane tab="申请人" key="1">
          <Applicant currentRow={currentRow} parentAgent={superiorInfo.upperAgentName} />
        </TabPane>
        {superiorInfo.upperAgentName && (
          <TabPane tab="上级代理" key="2">
            <Agent
              config={{
                username: superiorInfo.upperAgentName,
                userId: superiorInfo.upperAgentId,
                parentAgent: superiorInfo.secondAgentName,
              }}
            />
          </TabPane>
        )}
        {superiorInfo.secondAgentName && (
          <TabPane tab="上二级代理" key="3">
            <Agent
              config={{
                username: superiorInfo.secondAgentName,
                userId: superiorInfo.secondAgentId,
                parentAgent: '',
              }}
            />
          </TabPane>
        )}
      </Tabs>
    );
  };

  /**
   * 渲染足部
   */
  renderFooter = () => {
    const { handleCancel, handleDetailReview, isReview } = this.props;
    let footerOptions = [
      {
        id: 'reset',
        name: '取消',
        auth: true,
        default: 'button',
        type: 'default',
        event: {
          click: handleCancel,
        },
      },
    ];
    constant.MEMBER_REVIEW_CHECK_TYPE.forEach((item, index) => {
      if (!isReview) {
        // @ts-ignore
        footerOptions = [].concat(footerOptions, [
          {
            id: 'submit',
            name: item.label,
            auth: true,
            default: 'button',
            style: { background: item.color, borderColor: item.color },
            event: {
              click: () => handleDetailReview(item.value),
            },
          },
        ]);
      }
    });
    return (
      <div style={{ paddingTop: '20px' }}>
        <TableTool options={footerOptions} />
      </div>
    );
  };

  renderAccountInfo = () => getAccountInfo(this);

  render() {
    return (
      <div>
        {this.renderAccountInfo()}
        {this.renderContent()}
        {this.renderFooter()}
      </div>
    );
  }
}

export default Details;
